<template>
  <div class="swiper-banner">
    <div
      class="s-b-in"
      :style="{ width: `${100 * list.length}%`, transform: transformX }"
      :class="{ active: flag }"
    >
      <div v-for="(item, index) in list" :key="index" class="img-box">
        <div class="content1">
          <p class="ft-18">{{ item.title }}</p>
          <p class="ft-36">{{ item.subtitle }}</p>
          <p class="ft-18">{{ item.desc }}</p>
          <div class="btn">
            <span @click="toPage(item)">{{ $t('common.learnMore') }} ></span>
          </div>
        </div>
        <img :src="item.url" alt="banner" />
      </div>
    </div>
    <div class="page">
      <div
        v-for="(item, index) in imgs"
        :key="index"
        class="page-in"
        :class="{ active: activeIndex === index || (index === 0 && activeIndex === imgs.length) }"
        @click="handlePageChange(index)"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      flag: false,
      timer: null,
      timer2: null,
    }
  },
  computed: {
    imgs() {
      return [
        {
          url: require('@/assets/images/index/banner1.jpg'),
          title: this.$t('index.banner1'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner2.png'),
          title: this.$t('index.banner2'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner3.jpg'),
          title: this.$t('index.banner3'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner4.jpg'),
          title: this.$t('index.banner4'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner5.jpg'),
          title: this.$t('index.banner5'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
        {
          url: require('@/assets/images/index/banner6.jpg'),
          title: this.$t('index.banner6'),
          subtitle: this.$t('index.subtitle'),
          desc: this.$t('index.desc'),
        },
      ]
    },
    list() {
      return [...this.imgs, this.imgs[0]]
    },
    transformX() {
      const percent = 100 / this.list.length
      return `translateX(-${this.activeIndex * percent}%)`
    },
  },
  mounted() {
    this.autoScroll()
  },
  destroyed() {
    this.timer && clearInterval(this.timer)
    this.timer2 && clearTimeout(this.timer2)
  },
  methods: {
    handlePageChange(index) {
      this.activeIndex = index
      this.autoScroll()
    },
    autoScroll() {
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.flag = false
        this.activeIndex++
        if (this.activeIndex > this.imgs.length - 1) {
          this.timer2 && clearTimeout(this.timer2)
          this.timer2 = setTimeout(() => {
            this.flag = true
            this.activeIndex = 0
          }, 1000)
        }
      }, 3000)
    },
    toPage() {
      this.$router.push({
        path: '/product',
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.swiper-banner {
  overflow: hidden;
  position: relative;

  .s-b-in {
    font-size: 0;
    transition: all 0.3s ease;

    &.active {
      transition: none;
    }
  }

  .page {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;

    .page-in {
      .width(108);
      .height(10);
      .mg(0, 5, 0, 5);

      position: relative;
      cursor: pointer;

      &::after {
        content: '';
        .top(5);

        display: block;
        width: 100%;
        position: absolute;
        background: #bdbab9;
        height: 1px;
      }

      &.active {
        &::after {
          background: #fff;
        }
      }
    }
  }

  .img-box {
    display: inline-block;
    width: 100vw;
    position: relative;

    .content1 {
      .top(65);

      position: absolute;
      text-align: center;
      left: 50%;
      transform: translateX(-50%);

      .ft-18 {
        .ft(18);
      }

      .ft-36 {
        .ft(36);

        font-weight: bold;
      }

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        .mg(28, 0, 0, 0);

        span {
          .ft(18);
          .pd(0, 20, 0, 20);
          .height(36);
          .lineH(36);
          .border(20);

          font-weight: 400;
          display: block;
          background-color: #0762cb;
          color: #fff;
          cursor: pointer;

          &:hover {
            opacity: 0.6;
          }

          &.white {
            color: #fff;
            border: 1px solid #fff;
          }
        }
      }
    }
  }

  img {
    width: 100vw;
  }
}
</style>
